<template>
    <div class="segment">
        <functional :title="toolData.name" :icon="toolData.icon" :type="toolData.type">
            <el-collapse v-model="activeNames">
                <!-- <el-collapse-item title="新增绘标" name="1">
                    <div class="punctuationList" v-if="pageData.length > 0">
                        <div v-for="(item, index) in pageData" :key="index" :title="item.label" class="punctuationListItem" @click="itemClick(item)">
                            <el-checkbox v-model="item.checked1" @change="checkboxChange(item, item.checked1)" v-if="isEditor" class="punctuationListItemcheckbox" />
                            <el-image class="punctuationListItemimg" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover" />
                            <div class="itemNames">{{ item.label ? item.label : "未命名" }}</div>
                        </div>
                    </div>
                    <div v-else class="nodeData">暂无数据</div>
                </el-collapse-item> -->
                <el-collapse-item title="常用样式" name="2">
                    <div class="punctuationList" v-if="pageData && pageData.length > 0">
                        <div v-for="(item, index) in pageData" :key="index" :title="item.label" class="punctuationListItem" @click="itemClick(item)">
                            <div v-if="item.isShow == '1'">
                                <el-checkbox v-model="item.checked1" @change="checkboxChange(item, item.checked1)" v-if="isEditor" class="punctuationListItemcheckbox" />
                                <el-image class="punctuationListItemimg" :src="item.pic" fit="cover" />
                                <div class="itemNames">{{ item.label ? item.label : "未命名" }}</div>
                            </div>
                        </div>
                    </div>
                    <div v-else class="nodeData">暂无数据</div>
                </el-collapse-item>
            </el-collapse>
            <template #footer>
                <div class="submitBtn" v-if="isEditor">
                    <el-button color="#20a0ff" :dark="true" plain size="small" @click="cancelEditorPunctuationList">取消</el-button>
                    <el-button color="#20a0ff" :dark="true" plain size="small">删除</el-button>
                </div>
                <div class="submitBtn" v-else>
                    <el-button color="#20a0ff" :dark="true" plain size="small" @click="dialogVisible = true">新增样式</el-button>
                    <el-button color="#20a0ff" v-if="pageData && pageData.length > 0" :dark="true" plain size="small" @click="isEditor = true">编辑</el-button>
                </div>
            </template>
        </functional>
        <el-dialog v-model="dialogVisible" :title="`新增${toolData.name}`" width="318">
            <div class="functionaltopBtns">
                <div class="punctuationList" v-if="pageData.length > 0">
                    <div v-for="(item, index) in pageData" :key="index" :title="item.label" class="punctuationListItem" @click="newItemClick(item)">
                        <el-image class="punctuationListItemimg" :src="item.pic" fit="cover" />
                        <div class="itemNames">{{ item.label ? item.label : "未命名" }}</div>
                    </div>
                </div>
            </div>
            <!-- <template #footer>
                <div class="dialog-footer">
                    <el-button color="#20a0ff" :dark="true" plain size="small" @click="dialogVisible = true">新增</el-button>
                    <el-button color="#20a0ff" :dark="true" plain size="small" @click="isEditor = true">编辑</el-button>
                </div>
            </template> -->
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, watch } from "vue";
import toolFun from "@/config/tool.fun.config";
import startDraw from "@/utils/tool/startToolFunction";
import { getToolDefaultStyles } from "@/api/tool";
import { useStore } from "@/stores/index1";
import { useStoreData } from "@/stores/data";
const storeData = useStoreData();
const store = useStore();
interface Props {
    type?: string;
}
const props = withDefaults(defineProps<Props>(), {
    type: "",
});
const pageData: any = ref(toolFun[props.type]);
// 获取矢量工具常用样式
getToolDefaultStyles({
    type: props.type,
}).then((res) => {
    // console.log(res, 11111);
    pageData.value = res.data;
});
const activeNames: any = ref(["1", "2"]);
// 切换数据
const toolData = computed(() => {
    return store.tool.toolData;
});
watch(toolData, (nd, od) => {
    pageData.value = toolFun[nd.type];
});
const itemClick = (item: any) => {
    if (!isEditor.value) {
        // item.click();
        // console.log(startDraw(item, props.type));
        storeData.drawIcon = item.pic;
        startDraw(item);
    }
};
const checkboxChange = (item: any, val: any) => {
    console.log(item, val);
};
// 编辑状态
const isEditor = ref(false);
const cancelEditorPunctuationList = () => {
    isEditor.value = false;
};
// 新增标绘对话框
const dialogVisible = ref(false);
// // 对话框点击功能
// const onPlottingNew = (item: any) => {
//     dialogVisible.value = false;
//     item.click();
// };
/**
 * 新增样式
 */
const newItemClick = (item: any) => {
    dialogVisible.value = false;
    storeData.drawIcon = item.pic;
    startDraw(item);
};
</script>
